/**
 * Webpack2打包配置文件
 * 实现目标：
 *  1、项目工程化
 *  2、SPA模型配置
 *  3、编译Less预处理文件
 *  4、独立打包CSS文件
 *  5、抽取图片、字体资源、独立存放
 *  6、抽取公共包：vue、moment、第三方UI库
 *  7、异步加载路由、优化项目启动速度
 *  8、区分开发、生产环境、提高构建速度、和生产环境的文件缓存优化
 *  9、采用缓存进行增量rebuild、提高build速度
 *  10、采用module source map减少应用层代码打包体积
 *  11、提供前后端分离的数据访问、提供Proxy配置、进行请求转发
 */


var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

function assetsPath(_path) {
    return path.posix.join('assets', _path)
}

/**
 * 区分使用chunkhash、hash
 * chunkhash、会计算文件内容、判断是否生成新的hash、增加编译时间
 * @param {String} type 文件类型
 * @returns {*}
 */
function fileName(type) {
    if (process.env.NODE_ENV === 'production') {
        if (type == "css") {
            return 'modules/styles/[name].[chunkhash].css';
        }
        return 'modules/[name].[chunkhash].js';
    } else {
        if (type == "css") {
            return 'modules/styles/[name].[hash].css';
        }
        return 'modules/[name].[hash].js';
    }
}


function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

module.exports = {
    entry: {
        main: './src/main.js',
        //新增vendor包chunk、便于独立打包
        vendor: ['vue', 'moment']
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: fileName()
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use:['vue-loader']
            },
            {
                test: /\.js$/,
                //开启缓存优化
                loader: 'babel-loader?cacheDirectory',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                //用插件抽取css独立打包、配置打包输出路径
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    publicPath: "../../",
                    use: ['css-loader']
                })
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    publicPath: "../../",
                    use: ['css-loader', 'less-loader']
                })
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'file-loader',
                options: {
                    name: assetsPath('images/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader',
                options: {
                    limit: 10000,
                    name: assetsPath('fonts/[name].[hash:7].[ext]')
                }
            }
        ]
    },

    resolve: {
        extensions: ['.js', '.vue', '.json'],
        //当项目文件夹很多的时候、可以增加模块搜索速度
        modules: [path.resolve(__dirname, 'node_modules')]
    },
    performance: {
        hints: false
    },

    /**
     * 每个模块使用 eval() 执行，并且 SourceMap 转换为 DataUrl 后添加到 eval() 中。初始化 SourceMap 时比较慢，但是会在重构建时提供很快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中
     */
    devtool: '#cheap-module-eval-source-map',

    //开发服务配置、
    devServer: {
        host: 'localhost',
        port: 80,
        proxy: {
            '/mock': {
                target: 'http://112.74.74.189',
                pathRewrite: {'^/api': '/'},
                changeOrigin: true,
                secure: false
            }
        }
    },

    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: 'template.html'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity
        }),
        new ExtractTextPlugin(fileName("css"))
    ]
}

if (process.env.NODE_ENV === 'production') {

    module.exports.devtool="#module-source-map";
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            // 最紧凑的输出
            beautify: false,
            sourceMap: true,
            // 删除所有的注释
            comments: false,
            compress: {
                // 在UglifyJs删除没有用到的代码时不输出警告
                warnings: false,
                // 删除所有的 `console` 语句、还可以兼容ie浏览器
                drop_console: true,
                // 内嵌定义了但是只用到一次的变量
                collapse_vars: true,
                // 提取出出现多次但是没有定义成变量去引用的静态值
                reduce_vars: true
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
} else {
    module.exports.plugins = (module.exports.plugins || []).concat([])
}
